<!-- 任务详情 》 设备弹窗 》 工作流程 -->

<template>
  <div class="marginBottom DetailInspectionPersonal-DeviceProcess">
    <MajorTitle title="工作流程" />

    <WebTable :list="device.taskAssetItemResultDto || []" medium noPage auto>
      <RowIndex />
      <RowDict label="类型" bind="type" :dict="device1_DICT.RESULT" :width="120" />
      <RowText label="内容" bind="itemName" />
      <RowText label="工作标准" bind="itemContent" :minWidth="120" />

      <RowSlot label="结果" bind="resultValue" :width="200">
        <template #default="{ row, bind }">
          <FormSlot :bind="`result_${row.id}_${row.type}`" noLabel noMargin required>
            <FormRadio v-if="row.type === 1" v-bind="getProps(row, bind, 1)" @change="toChange(row, bind, 1)" />
            <FormInput v-if="row.type === 2" v-bind="getProps(row, bind, 2)" @change="toChange(row, bind, 2)" />
            <FormRadio v-if="row.type === 3" v-bind="getProps(row, bind, 3)" @change="toChange(row, bind, 3)" />
          </FormSlot>
        </template>
      </RowSlot>

      <RowSlot label="照片" bind="image" :width="180">
        <template #default="{ row, bind }">
          <FormSlot v-if="row.imageRequire === 1" :bind="`result_${row.id}_4`" noLabel noMargin required>
            <FormImage v-bind="getProps(row, bind, 4)" folder="inspection" @change="toChange(row, bind, 4)" />
          </FormSlot>
        </template>
      </RowSlot>
    </WebTable>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeviceProcess',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixWeb('device1', 'device1_'), CORE.mixWeb('device2', 'device2_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 设备单项
     */
    device() {
      const path = this.GETTER.path
      return this[`${path}_one`]
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取属性
     */
    getProps(row, bind, type) {
      const props = {
        one: row,
        bind,
        noLabel: true,
        noMargin: true,
        medium: true,
      }
      if (type === 1) Object.assign(props, { dict: this.device1_DICT.CONFIRM, isBtn: true })
      if (type === 3) Object.assign(props, { dict: this.device1_DICT.COMPLETE, isBtn: true })
      if (type === 4) Object.assign(props, { limit: 3, square: 36, text: '上传' })
      return props
    },

    /**
     * 触发更新
     */
    toChange(row, bind, type) {
      const value = row[bind]
      this.device[`result_${row.id}_${type}`] = CORE.isEmpty(value) ? '' : 'ready'
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
